// 头部 子

import { DatePicker, Space, Input, Radio, Button } from 'antd';
import { useState, useContext } from 'react';
import ContextTodo from './store/contextTodo'; //公共数据

const Search3 = (props) => {
  const context = useContext(ContextTodo);

  const [value, setValue] = useState({
    time: '',
    name: '',
    priority: 1,
  });

  // 时间
  const onChange = (date, dateString) => {
    console.log(date, dateString);
    setValue({
      ...value,
      time: dateString,
    });
  };
  // 优先级
  const onChange2 = (e) => {
    console.log('radio-checked', e.target.value);
    setValue({
      ...value,
      priority: e.target.value,
    });
  };

  // 标题
  const biaoname = (e) => {
    setValue({
      ...value,
      name: e.target.value,
    });
  };

  // 添加
  let add = () => {
    let { name, priority, time } = value;
    // props.todolist4({time,name,priority})
    // console.log(value);
    context.todolist4({ name, priority, time });
  };

  return (
    <>
      <div className="swarch">
        {/* 日期 */}
        <div className="time">
          <span style={{ color: '#fff' }}>日期：</span>
          <Space direction="vertical" className="time2">
            <DatePicker onChange={onChange} />
          </Space>
        </div>
        {/* 标题 */}
        <div className="input">
          <span style={{ color: '#fff' }}>标题：</span>
          <Input
            placeholder="请输入标题"
            className="inp2"
            value={value.name}
            onChange={biaoname}
          />
        </div>
      </div>

      {/* 优先级 */}
      <div className="priority">
        <span style={{ color: '#fff' }}>优先级：</span>
        <Radio.Group onChange={onChange2} value={value.priority}>
          <Radio value={1}>1</Radio>
          <Radio value={2}>2</Radio>
          <Radio value={3}>3</Radio>
          <Radio value={4}>4</Radio>
        </Radio.Group>
      </div>

      <div>
        <Button className="buttonas" type="primary" onClick={add}>
          添加
        </Button>
      </div>
    </>
  );
};

export default Search3;
